<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{date|formatDate}}
    </div> 
    <script>
        var app = new Vue ({
            el : "#app",
            data() {
                return {
                    date: new Date(),
                    timer: null
                }
            },
            created(){ //实例创建完成后,此阶段完成了数据的观测等,但尚未挂载, $el还不可用,需要初始化处理一些数据地会比较有用
                console.log('created')
            },
            methods: {
                
            },
            mounted() {
                // this.timer = setInterval( () => {
                //     this.date = new Date();
                // }, 1000)
            },
            beforeDestroy() {//vue实例销毁的之前调用这个方法
                console.log('beforeDestroy');
                if(this.timer) {
                    clearInterval(this.timer);
                }
            },
            filters: {
                formatDate(value) {
                    let padDate = function(value) {
                        return value < 10 ? "0" + value : value; 
                    }
                    let date = new Date(value);
                    let year = date.getFullYear();
                    let month = padDate(date.getMonth() + 1);
                    let day = padDate(date.getDate());
                    let hours = padDate(date.getHours());
                    let minutes = padDate(date.getMinutes());
                    let seconds = padDate(date.getSeconds());
                    return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`
                }
            }
            
        });
    </script>
</body>
</html>